import React from "react";
import MoreInfoBox from "../../../Component/MoreInfoBox";
import './index.css';
import Blank from "../../../Component/Blank";
import Fire from "../../../Common/svg/Fire";
import BluePoint from "../../../Component/BluePoint";
import { Button } from 'antd';
import { Input } from 'antd';
import ExaminationBookServer from "../../../Server/Study/ExaminationBookServer";
import { Pagination } from 'antd';


export default class  extends React.Component{
    
    constructor(props){
        super();
        
        this.state={
            hot:[],
            common:[],
            page:1,
            totalPage:1,
            searchValue:""
        }
        this.ListData(1);
    }
    OnPageChange(page){
        this.setState({
            page: page,
          },()=>{
            this.ListData(page);
          });
    }
    ListData(page){
        let common=[];
        let hot=[];
        ExaminationBookServer.SelectExaminationBookList(page)
        .then(response=>{
            response.data.common.list.forEach(i => {
                common.push(this.GenCommon(i.id,i.title,"",i.content));
            });

            response.data.hot.forEach(i => {
                hot.push(this.GenHot(i.id,i.title,"",i.content));
            });
            this.setState({
                hot,
                common,
                page:response.data.common.pageNum,
                totalPage:response.data.common.total
            },()=>{
                let data = {
                    name: 'ChangeHeight',
                }
                window.parent.postMessage(data,'*');
            });
        },reject=>{

        });
    }
    //填充普通数据
    GenCommon(id,title,titleDesc,desc){
        let blueTitle=<div id={"common_"+id} key={id} className="ItemBank_QuestionTitle">
            <span className="ExamTreasure_Ico"><BluePoint/></span><span>{title}</span><span className="ItemBank_QuestionTitleDesc">{titleDesc}</span></div>
        let questions=<div className="ItemBand_QuestionNode_Container">
                          {desc}  
                        </div>
        return  (<div  key="commoncontainer" className=" ItemBand_QuestionNode_Cchapter">
                    <MoreInfoBox title={blueTitle} desc={questions} />
                </div>);
    }
    //填充热点数据
    GenHot(id,title,titleDesc,desc){
    let hotTitle=<div id={"hot_"+id} key={id} className="ItemBank_QuestionTitle"><span className="ExamTreasure_Ico"><Fire/></span>
                <span>{title}</span>
    <span className="ItemBank_QuestionTitleDesc">{titleDesc}</span>
            </div>
        let questions=<div className="ItemBand_QuestionNode_Container">
                          {desc}  
                        </div>
        return  (<div key="hotcontainer" className=" ItemBand_QuestionNode_Cchapter">
                    <MoreInfoBox title={hotTitle} desc={questions} />
                </div>);
    }
    Search(){
        let common=[];
        let value=this.state.searchValue;
        if(value.trim()===""){
            return;
        }
        ExaminationBookServer.SelectExaminationBookListSearch(value)
        .then(response=>{
            console.log(response)
            response.data.forEach(i => {
                common.push(this.GenCommon(i.id,i.title,"",i.content));
            });
            this.setState({
                common,
            },()=>{
                let data = {
                    name: 'ChangeHeight',
                }
                window.parent.postMessage(data,'*');
            });
        },reject=>{

        });
    }
    render(){
        return(
            <div>
                <div className="flexContainer ExamTreasure_Container" style={{backgroundColor:"#F9FCFF"}}>
                    <Blank/>
                    <span>
                        <Input placeholder="考点"  style={{width:"8rem",marginRight:"0.4rem"}} onChange={e=>this.setState({searchValue:e.target.value})}/>
                        <Button type="primary" onClick={e=>this.Search(encodeURI)}>搜索</Button>
                    </span>
                </div>
                <div  className="ItemBank_Container ">
                    <div>
                        {this.state.hot}
                    </div>
                    <div>
                        {this.state.common}
                    </div>
                    <div style={{textAlign:"center"}}>
                        <Pagination current={this.state.page} total={this.state.totalPage} onChange={e=>this.OnPageChange(e)}/>
                    </div>
                </div>
            </div>
            
        )
    }
}